<template>
	<view class="universal-detail">
		<view class="universal-detail-top">
			<view class="universal-detail-top-time">
				<text class="universal-detail-top-title">调度执行</text>
			</view>
		</view>

		<view class="univers al-detail-cont">
			<van-form class="universal-detail-form" @submit="onSubmit" label-width="140rpx">
				<van-cell-group>
					<van-field v-model="form.feedbackDetail" required colon rows="4" autosize type="textarea"
						label="执行反馈" show-word-limit maxlength="200" :rules="[{ required: true, message: '请输入执行反馈' }]"
						placeholder="请输入执行反馈" />
					<van-field v-model="form.completeTime" required is-link readonly colon name="datePicker"
						label="完成时间" placeholder="请选择完成时间" @click="selectShow.calendar = true"
						:rules="[{ required: true, message: '请选择完成时间' }]" />
					<van-field v-model="form.totalFillWater" required colon type="number" label="实灌总量"
						placeholder="请输入实灌总量">
						<template #button>m³</template>
					</van-field>
					<van-field name="uploader" required colon label="照片"
						:rules="[{ required: true, message: '请上传照片' }]">
						<template #input>
							<upload-file accept="image/*" v-model="form.picIds" />
						</template>
					</van-field>
					<van-field name="uploader" colon label="视频">
						<template #input>
							<upload-file accept="video/*" v-model="form.vedioIds" />
						</template>
					</van-field>
					<van-field label="审核人" v-model="form.nextAuditorName" required is-link readonly colon
						placeholder="请选择审核人" @click="selectShow.user = true"
						:rules="[{ required: true, message: '请选择审核人' }]" />
				</van-cell-group>

				<view class="universal-detail-bottom">
					<van-button class="universal-detail-bottom-button universal-detail-bottom-button-cancel"
						type="default" @click="routeBack">取消</van-button>
					<van-button class="universal-detail-bottom-button universal-detail-bottom-button-sumbit"
						type="primary" native-type="submit">提交</van-button>
				</view>
			</van-form>
		</view>

		<!-- 选择器 时间 年月日时分秒 -->
		<picker-date-time v-model:show="selectShow.calendar" :max-date="maxDate" @confirm="onCalendarConfirm" />

		<!-- 选择器 单选 审批人 -->
		<picker-search v-model:show="selectShow.user" :columns="userList" @confirm="onUserConfirm"
			@cancel="selectShow.user = false" />
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	import {
		apiUsersList,
	} from '@/api/common';

	import {
		apiWaterDemandPlanFeedback
	} from '@/api/waterproofScheduling';

	import store from '@/store'

	const model = defineModel();
	const emit = defineEmits(['confirm']);
	const theMaxDate = new Date();
	theMaxDate.setFullYear(theMaxDate.getFullYear() + 1);
	const maxDate = ref(theMaxDate);
	const form = ref({
		planFeedbackId: '',
		demandPlanId: '',
		picIds: [],
		vedioIds: [],
	});

	const selectShow = ref({
		calendar: false,
		user: false,
	});

	// 确认 时间 完成时间
	const onCalendarConfirm = (value) => {
		form.value.completeTime = value;
		selectShow.value.calendar = false;
	}

	// 系统用户列表
	const userList = ref([]);
	const getUserList = () => {
		apiUsersList({
			pageNum: 1,
			pageSize: 9999,
		}).then(res => {
			userList.value = res.records.map(n => ({
				text: n.name,
				value: n.userId
			}));
		})
	}
	const onUserConfirm = ({
		selectedValues,
		selectedOptions
	}) => {
		form.value.nextAuditor = selectedOptions[0].value;
		form.value.nextAuditorName = selectedOptions[0].text;
		selectShow.value.user = false;
	}

	const onSubmit = () => {
		uni.showLoading({
			title: '提交中',
			mask: true
		});

		apiWaterDemandPlanFeedback(form.value).then(res => {
			uni.showToast({
				title: '提交成功',
				icon: 'success',
			});
			emit('confirm');
		}).finally(() => {
			uni.hideLoading();
		})
	}

	const routeBack = () => {
		uni.navigateBack({
			delta: 1
		});
	}

	form.value.planFeedbackId = model.value.feedback.planFeedbackId || '';
	form.value.demandPlanId = model.value.plan.demandPlanId || '';
	getUserList();
</script>

<style lang="scss" scoped>
	@import '@/assets/universal-detail.scss';
	@import '@/assets/form.scss';
</style>